<template>
  <!-- 用户管理 -->
  <div>
    <!-- 页面标题 -->
    <div id="user-management-title">
      <h1 style="margin-left:50px">用户管理</h1>
    </div>

    <!-- 筛选条件 -->
    <div id="user-management-select-div">
      <div class="user-management-select-top">
        <i class="el-icon-set-up"
           style="margin-left:50px"></i>&nbsp;&nbsp;筛选
      </div>
      <div id="user-management-select-bottom">
        <el-input v-model="accountsearch"
                  placeholder="输入用户姓名或账号"
                  style="width:250px;margin-left:50px;float:left"></el-input>
        <div style="height: 100%;
  line-height: 100px;float:left;margin-left:50px">
          注册时间：</div>
        <el-date-picker v-model="selectdate"
                        type="date"
                        placeholder="注册日期"
                        style="float:left;width:200px;margin-left:50px"
                        value-format="yyyy/MM/dd HH:mm">
        </el-date-picker>
        <div style="height:100%;float:left;margin-left:30px">
          <el-button type="primary"
                     @click="search"
                     round>筛选</el-button>
        </div>
      </div>
    </div>

    <!-- 用户列表 -->
    <div id="user-management-listdiv">
      <div class="user-management-select-top">
        <i class="el-icon-tickets"
           style="margin-left:50px"></i>&nbsp;&nbsp;用户列表
      </div>
      <!-- 条目展示 -->
      <div id="user-management-userlistdiv">
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column prop="registdate"
                           label="加入时间"
                           width="200">
          </el-table-column>
          <el-table-column prop="username"
                           label="用户名"
                           width="200">
          </el-table-column>
          <el-table-column prop="telephone"
                           label="电话"
                           width="200">
          </el-table-column>
          <el-table-column prop="status"
                           label="启用状态"
                           width="200">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status"
                         :active-value=1
                         :inactive-value=0
                         @change="statusSwitch(scope.row)">

              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleCheckFamilyfile(scope.row.id)">家庭档案</el-button>
              <el-button size="mini"
                         @click="handleCheckDelivery(scope.row.id)">收货地址</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.row.id,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 全选、批量删除、页码 -->
      <div style="height:60px">
        <div id="user-management-deletealldiv">
          <el-button type="danger"
                     size="small"
                     @click="handleDeleteall()"
                     round>批量删除</el-button>
        </div>
        <div id="user-management-pagediv">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="currentpage"
                         :page-size="pagesize"
                         layout="prev, pager, next, jumper"
                         :total="totalpage">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      //筛选
      accountsearch: '',
      selectdate: '',
      //列表
      multipleSelection: [],
      tableData: [],
      //分页
      currentpage: 1,
      pagesize: 10,
      totalpage: 1
    }
  },
  created () {
    //列表内容请求
    this.requestuser();
  },
  methods: {
    //请求用户条目
    requestuser () {
      this.$axios({
        method: "get",
        url: "/user-management/findUser",
        params: {
          currentpage: this.currentpage,
          pagesize: this.pagesize,
          accountsearch: this.accountsearch,
          selectdate: this.selectdate
        }
      }).then(res => {
        this.tableData = res.data.data.records;
        this.currentpage = res.data.data.current;
        this.totalpage = res.data.data.total;
      })
    },
    //删除单行用户条目
    deleteuser (userid, index) {
      this.$axios({
        method: "delete",
        async: false,
        url: "/user-management/deleteUser",
        params: {
          id: userid
        }
      }).then(res => {
        if (res.data.message = "删除成功") {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
        } else {
          this.$message.error(res.data.message);
          return;
        }
        this.tableData.splice(index, 1);
        if (this.tableData.length == 0 && this.currentpage != 1) {
          this.currentpage--;
        }
        this.$axios({
          method: "get",
          url: "/user-management/findUser",
          async: false,
          params: {
            currentpage: this.currentpage,
            pagesize: this.pagesize,
            accountsearch: this.accountsearch,
            selectdate: this.selectdate
          }
        }).then(res => {
          this.tableData = res.data.data.records;
          this.currentpage = res.data.data.current;
          this.totalpage = res.data.data.total;
          setTimeout(
            this.$forceUpdate(), 500);
        });
      }
      )
    },
    //筛选
    search () {
      this.currentpage = 1;
      this.requestuser();
    },
    //全选、反选功能
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //选中改变
    handleSelectionChange (val) {
      this.multipleSelection = val;

    },
    //查看家庭档案
    handleCheckFamilyfile (id) {
      this.$router.push("/index/family-file/" + id);
      document.documentElement.scrollTop = 0;
    },
    //查看收货地址
    handleCheckDelivery (id) {
      this.$router.push("/index/delivery-message/" + id);
      document.documentElement.scrollTop = 0;

    },
    //删除行信息
    handleDelete (id) {
      console.log("deletebyid:" + id);
      this.deleteuser(id);
    },
    //批量删除
    handleDeleteall (rows) {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'info',
          message: '无选中项'
        });
        return;
      }
      this.$confirm('是否确认此操作？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        this.multipleSelection.forEach(user => {
          ids.push(user.id);
          let index = this.tableData.findIndex(function (user) {
            return user.index;
          });
          this.tableData.splice(index, 1);
        });
        if (this.tableData.length == 0 && this.currentpage != 1) {
          this.currentpage--;
        }
        this.multipleSelection = [];
        ;
        this.$axios({
          method: "delete",
          data: JSON.stringify(ids),
          dataType: 'json',
          url: "/user-management/deleteSelectUser",
          async: false,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res => {
          if (res.data.message = "删除成功") {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message
            );
          }

          if (this.tableData.length == 0 && this.currentpage != 1) {
            this.currentpage--;
          }
          this.$axios({
            method: "get",
            url: "/user-management/findUser",
            async: false,
            params: {
              currentpage: this.currentpage,
              pagesize: this.pagesize,
              accountsearch: this.accountsearch,
              selectdate: this.selectdate

            }
          }).then(res => {
            this.tableData = res.data.data.records;
            this.currentpage = res.data.data.current;
            this.totalpage = res.data.data.total;
            setTimeout(
              this.$forceUpdate(), 500);
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.requestuser();
    },
    //状态码
    statusSwitch (row) {
      this.$axios({
        method: "get",
        url: "/user-management/statusChange",
        params: {
          id: row.id,
          status: row.status
        }
      });
      this.$message({
        message: '更新成功',
        type: 'success'
      });
    },

  }
}
</script>
<style scoped>
* {
  /* border: 1px solid red; */
  border-radius: 3px;
}
/* 页面标题 */
#user-management-title {
  margin-left: 50px;
  margin-right: 50px;
  height: 60px;
}
/* 筛选条件 */
#user-management-select-div {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 10px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.user-management-select-top {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  line-height: 50px;
  font-size: 20px;
}
.el-icon-set-up {
  font-size: 30px;
  margin-top: 10px;
}
#user-management-select-bottom {
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
}
/* 用户列表 */
#user-management-listdiv {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid gainsboro;
  border-radius: 3px;
  overflow: hidden;
}
.el-icon-tickets {
  font-size: 30px;
  margin-top: 10px;
}
#user-management-userlistdiv {
  overflow: hidden;
}
/* 批量删除 */
#user-management-deletealldiv {
  width: 100px;
  height: 50px;
  float: left;
  margin-left: 50px;
  margin-top: 10px;
}
/* 分页 */
#user-management-pagediv {
  height: 50px;
  float: left;
  margin-left: 200px;
  margin-top: 10px;
}
</style>